<!-- 退款/退货 -->
<template>
	<view class="container">
		<!-- 商品信息 -->
		<view class="goods-info">
			<image class="pic" src="/pagesC-order/static/images/will-delete/goods1.png" mode="aspectFill"></image>
			<text class="desc">舒绝杀蚁饵剂</text>
			<text class="count">x1</text>
		</view>

		<!-- 类型和原因 -->
		<view class="picker-list">
			<view class="picker-item border-bottom-1px">
				<text class="label">申请类型</text>
				<picker class="picker" @change="typeRangeChange" :value="typeIndex" :range="typeRange" range-key="name">
					<text class="value">{{typeRange[typeIndex].name}}</text>
				</picker>
				<text class="iconfont right-icon">&#xe61a;</text>
			</view>
			<view class="picker-item border-bottom-1px" v-if="typeIndex == 1">
				<text class="label">收货状态</text>
				<picker class="picker" @change="statusRangeChange" :value="statusIndex" :range="statusRange"
					range-key="name">
					<text class="value">{{statusRange[statusIndex].name}}</text>
				</picker>
				<text class="iconfont right-icon">&#xe61a;</text>
			</view>
			<view class="picker-item">
				<text class="label">申请原因</text>
				<picker class="picker" @change="reasonRangeChange" :value="reasonIndex" :range="reasonRange"
					range-key="name">
					<text class="value" v-if="reasonRange[reasonIndex]">{{reasonRange[reasonIndex].name}}</text>
					<text class="value placeholder" v-else>点击选择申请原因</text>
				</picker>
				<text class="iconfont right-icon">&#xe61a;</text>
			</view>
		</view>

		<!-- 数量和金额 -->
		<view class="amount-list">
			<view class="num-item border-bottom-1px" v-if="typeIndex == 0">
				<text class="label">退货数量（本次可申请1件）</text>
				<view class="btn-group">
					<button class="iconfont btn minus-btn">&#xe60f;</button>
					<input class="input" type="number" value="1" />
					<button class="iconfont btn plus-btn">&#xe60e;</button>
				</view>
			</view>
			<view class="amount-item">
				<text class="label">申请金额</text>
				<view class="input-box">
					<text class="unit">￥</text>
					<input class="input" type="digit" placeholder="本次可退￥36.8,请输入申请金额" placeholder-style="color: #aaa" />
				</view>
			</view>
		</view>

		<!-- 说明 -->
		<view class="describe">
			<view class="header">
				<text class="title">申请说明</text>
				<text class="label">您还可以输入170字</text>
			</view>
			<view class="body">
				<textarea class="text-area" value="" placeholder="必填,请您详细填写申请说明" placeholder-style="color: #aaa" />
			</view>
			<view class="footer">
				<view class="upload-item">
					<view class="pic-box" v-for="item in filePaths" :key="item.id">
						<image class="pic" :src="item.path" mode="aspectFill">
						</image>
						<button @click="handleRemovePic(item.id)" class="close-btn iconfont">&#xe603;</button>
					</view>
					<!-- 选择图片按钮 -->
					<button @click="handleChooseImage()"
						class="upload-btn iconfont btn-transition-scale95">&#xe617;</button>
				</view>
			</view>
		</view>

		<!-- 电话 -->
		<view class="contact">
			<text class="label">联系电话</text>
			<input class="input" type="text" value="13143665564" />
		</view>

		<!-- 提交 -->
		<view class="btn-box">
			<button class="submit-btn btn-transition-scale95">提交申请</button>
		</view>
	</view>
</template>

<script setup>
	import { ref, watchEffect } from 'vue';

	const props = defineProps({
		typeIndex: {
			type: String,
			default: '0'
		}
	});
	
	// 申请类型
	const typeRange = ref([
		{ name: '我要退货退款', value: '1' },
		{ name: '我要退款（无需退货）', value: '2' },
	]);
	const typeIndex = ref(1);

	const typeRangeChange = (e) => {
		typeIndex.value = e.detail.value;
		
		if (typeIndex.value == '0') {
			uni.setNavigationBarTitle({
				title: '申请退货退款'
			});
		} else if (typeIndex.value == '1') {
			uni.setNavigationBarTitle({
				title: '申请退款'
			});
		}
	}
	
	watchEffect(() => {
		if (props.typeIndex == '0') {
			uni.setNavigationBarTitle({
				title: '申请退货退款'
			});
		} else if (props.typeIndex == '1') {
			uni.setNavigationBarTitle({
				title: '申请退款'
			});
		}
		
		typeIndex.value = props.typeIndex;
	});

	// 收货状态
	const statusRange = ref([
		{ name: '未收到货', value: '1' },
		{ name: '已收到货', value: '2' },
	]);
	const statusIndex = ref(1);

	const statusRangeChange = (e) => {
		statusIndex.value = e.detail.value;
	}

	// 申请原因
	const reasonRange = ref([
		{ name: '不想要了', value: '1' },
		{ name: '不喜欢，效果不好', value: '2' },
		{ name: '货物与描述不符', value: '3' },
		{ name: '质量问题', value: '4' },
		{ name: '收到商品少件（含少配件）', value: '5' },
		{ name: '商品破损或污渍', value: '6' },
		{ name: '商家发错货', value: '7' },
		{ name: '假冒品牌', value: '8' },
		{ name: '其它原因', value: '9' },
	]);
	const reasonIndex = ref(-1);

	const reasonRangeChange = (e) => {
		reasonIndex.value = e.detail.value;
	}


	const filePaths = ref([]);

	// 选择图片上传
	const handleChooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera', 'album'], //从相册选择
			success: async (res) => {
				// uni.showLoading({ title: '上传中...' });
				// const result = await api.c_need_api.upload({
				// 	filePath: res.tempFilePaths[0],
				// }).finally(() => setTimeout(uni.hideLoading, 100));

				// filePaths.value.push(result.data.data);
				filePaths.value.push({ path: res.tempFilePaths[0], id: Date.now() })
			}
		})
	}

	// 移除图片
	const handleRemovePic = (id) => {
		const index = filePaths.value.findIndex(item => item.id === id);
		filePaths.value.splice(index, 1);
		// formData.value.photo = filePaths.value.map(item => item.id).join();
	}
</script>

<style lang="scss" scoped>
	.goods-info {
		position: relative;
		display: flex;
		align-items: flex-start;
		padding: 20rpx 30rpx;
		background-color: white;
		border-top: 2rpx solid #fafafa;

		.pic {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
		}

		.desc {
			font-size: 28rpx;
			color: #888;
			margin-left: 20rpx;
		}

		.count {
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			font-size: 28rpx;
			color: #888;
		}
	}

	.picker-list {
		margin-top: 20rpx;
		padding-left: 20rpx;
		background-color: white;

		.picker-item {
			display: flex;
			align-items: center;
			height: 90rpx;
			padding-right: 20rpx;

			.label {
				flex-shrink: 0;
				font-size: 28rpx;
				color: #555;
			}

			.picker {
				flex-grow: 1;
			}

			.value {
				flex-grow: 1;
				font-size: 28rpx;
				color: #222;
				padding: 0 20rpx;

				&.placeholder {
					color: #aaa;
				}
			}

			.right-icon {
				font-size: 20rpx;
				color: #aaa;
			}
		}
	}

	.amount-list {
		margin-top: 20rpx;
		padding-left: 20rpx;
		background-color: white;

		.num-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 90rpx;
			padding-right: 20rpx;

			.label {
				font-size: 28rpx;
				color: #555;
			}

			.btn-group {
				display: flex;
				align-items: center;

				.btn {
					width: 40rpx;
					height: 40rpx;
					font-size: 20rpx;
					color: #222;
					text-align: center;
					line-height: 40rpx;
					background-color: #eee;
					border-radius: 4rpx;
				}

				.input {
					width: 50rpx;
					height: 40rpx;
					font-size: 28rpx;
					color: #222;
					text-align: center;
				}
			}
		}

		.amount-item {
			padding: 30rpx 0;

			.label {
				display: block;
				font-size: 28rpx;
				color: #555;
			}

			.input-box {
				display: flex;
				align-items: center;
				margin-top: 20rpx;

				.unit {
					flex-shrink: 0;
					font-size: 34rpx;
					font-weight: bold;
					color: #222;
				}

				.input {
					flex-grow: 1;
					font-size: 30rpx;
					font-weight: bold;
					color: #222;
					padding-left: 10rpx;
				}
			}
		}
	}

	.describe {
		margin-top: 20rpx;
		padding-left: 20rpx;
		background-color: white;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			padding-right: 20rpx;

			.title {
				font-size: 28rpx;
				color: #555;
			}

			.label {
				font-size: 22rpx;
				color: #aaa;
			}
		}

		.body {
			padding-right: 20rpx;

			.text-area {
				width: 100%;
				height: 250rpx;
				font-size: 28rpx;
				color: #222;
			}
		}

		.footer {
			padding-left: 10rpx;

			.upload-item {
				display: flex;
				flex-wrap: wrap;
				padding-bottom: 38rpx;
				margin-left: -30rpx;
				overflow: hidden;

				.pic-box {
					position: relative;
					width: 136rpx;
					height: 136rpx;
					margin-top: 25rpx;
					margin-left: 30rpx;

					.pic {
						width: inherit;
						height: inherit;
						border-radius: 10rpx;
					}

					.close-btn {
						position: absolute;
						top: -20rpx;
						right: -20rpx;
						font-size: 40rpx;
						color: #D9D9D9;
						border-radius: 50%;
						background: radial-gradient(#999999 50%, transparent 50%);
					}
				}

				.upload-btn {
					width: 136rpx;
					height: 136rpx;
					font-size: 60rpx;
					color: #60646F;
					text-align: center;
					line-height: 136rpx;
					border-radius: 10rpx;
					background-color: #F5F4F5;
					margin-top: 25rpx;
					margin-left: 30rpx;
				}
			}
		}
	}

	.contact {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		height: 90rpx;
		background-color: white;
		padding: 0 20rpx;

		.label {
			flex-shrink: 0;
			font-size: 28rpx;
			color: #555;
		}

		.input {
			flex-grow: 1;
			font-size: 28rpx;
			color: #222;
			padding-left: 40rpx;
		}
	}

	.btn-box {
		padding: 30rpx 45rpx 24rpx;

		.submit-btn {
			width: 100%;
			height: 88rpx;
			font-size: 28rpx;
			color: white;
			text-align: center;
			line-height: 88rpx;
			border-radius: 44rpx;
			background-color: #FE3333;
		}
	}
</style>